<!DOCTYPE html>
<html>
<head>
  <title>Rate Distribution Curve</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="physics-graph" width="500" height="450"></canvas>
  <script>
    const canvas = document.getElementById('physics-graph');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const padding = 60;
    const originX = padding;
    const originY = canvas.height - padding - 40; // Extra space for bottom label
    const axisWidth = canvas.width - 2 * padding;
    const axisHeight = canvas.height - 2 * padding - 40;

    // --- Define key points based on proportions ---
    // These values determine the positions of v0 and A on the axes
    const v0_pos = axisWidth * 0.4;
    const A_pos = axisHeight * 0.7;

    const p_origin = { x: originX, y: originY };
    const p_v0_A = { x: originX + v0_pos, y: originY - A_pos };
    const p_2v0_A = { x: originX + 2 * v0_pos, y: originY - A_pos };

    // --- Drawing Functions ---

    function drawAxes() {
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 1.5;

      // Y-axis with arrowhead
      ctx.moveTo(originX, originY + 10);
      ctx.lineTo(originX, padding - 20);
      ctx.lineTo(originX - 5, padding - 15);
      ctx.moveTo(originX, padding - 20);
      ctx.lineTo(originX + 5, padding - 15);

      // X-axis with arrowhead
      ctx.moveTo(originX - 10, originY);
      ctx.lineTo(canvas.width - padding + 20, originY);
      ctx.lineTo(canvas.width - padding + 15, originY - 5);
      ctx.moveTo(canvas.width - padding + 20, originY);
      ctx.lineTo(canvas.width - padding + 15, originY + 5);

      ctx.stroke();
    }

    function drawLabels() {
      ctx.fillStyle = 'black';
      ctx.textAlign = 'center';
      
      // Axis labels
      ctx.font = 'italic 20px Times New Roman';
      ctx.fillText('f(v)', originX, padding - 30);
      ctx.fillText('v', canvas.width - padding + 20, originY + 25);

      // Origin label
      ctx.font = '20px Times New Roman';
      ctx.fillText('O', originX - 15, originY + 20);

      // Ticks and labels on axes
      ctx.font = 'italic 18px Times New Roman';
      ctx.textAlign = 'left';
      ctx.fillText('A', originX - 25, p_v0_A.y + 5);

      ctx.textAlign = 'center';
      // Label v₀
      ctx.fillText('v', p_v0_A.x, originY + 25);
      ctx.font = 'italic 12px Times New Roman';
      ctx.fillText('0', p_v0_A.x + 8, originY + 28);

      // Label 2v₀
      ctx.font = 'italic 18px Times New Roman';
      ctx.fillText('2v', p_2v0_A.x, originY + 25);
      ctx.font = 'italic 12px Times New Roman';
      ctx.fillText('0', p_2v0_A.x + 12, originY + 28);
        
      // Caption
      ctx.font = '20px KaiTi'; // A standard Chinese font
      ctx.fillText('习题 5-13 图', canvas.width / 2, canvas.height - 20);
    }

    function drawGraph() {
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 2;
      ctx.moveTo(p_origin.x, p_origin.y);
      ctx.lineTo(p_v0_A.x, p_v0_A.y);
      ctx.lineTo(p_2v0_A.x, p_2v0_A.y);
      ctx.stroke();
    }

    function drawDashedLines() {
      ctx.beginPath();
      ctx.setLineDash([4, 4]);
      ctx.lineWidth = 1;
      ctx.strokeStyle = 'black';

      // Vertical line from v₀ on x-axis to the graph
      ctx.moveTo(p_v0_A.x, originY);
      ctx.lineTo(p_v0_A.x, p_v0_A.y);

      // Vertical line from 2v₀ on x-axis to the graph
      ctx.moveTo(p_2v0_A.x, originY);
      ctx.lineTo(p_2v0_A.x, p_2v0_A.y);

      // Horizontal line from A on y-axis to the graph
      ctx.moveTo(originX, p_v0_A.y);
      ctx.lineTo(p_v0_A.x, p_v0_A.y);

      ctx.stroke();
      
      // Reset line dash for subsequent drawings
      ctx.setLineDash([]);
    }

    // --- Main Drawing Execution ---
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawAxes();
    drawLabels();
    drawDashedLines();
    drawGraph();

  </script>
</body>
</html>